<template>
  <CommonPage show-footer title="旋翼类型列表">
    <template #action>
      <NButton type="primary" @click="handleAdd">
        <TheIcon icon="material-symbols:add" :size="18" class="mr-5" />新建旋翼类型
      </NButton>
    </template>

    <CrudTable
      ref="$table"
      v-model:query-items="queryItems"
      :columns="columns"
      :get-data="api.getRotorTypeList"
    >
      <template #queryBar>
        <QueryBarItem label="类型名称" :label-width="80">
          <NInput
            v-model:value="queryItems.name"
            clearable
            type="text"
            placeholder="请输入类型名称"
            @keypress.enter="$table?.handleSearch()"
          />
        </QueryBarItem>
      </template>
    </CrudTable>

    <CrudModal
      v-model:visible="modalVisible"
      :title="modalTitle"
      :loading="modalLoading"
      @save="handleSave"
    >
      <NForm
        ref="modalFormRef"
        label-placement="left"
        label-align="left"
        :label-width="80"
        :model="modalForm"
        :rules="validateRotorType"
      >
        <NFormItem label="类型名称" path="name">
          <NInput v-model:value="modalForm.name" clearable placeholder="请输入类型名称" />
        </NFormItem>
        <NFormItem label="预设转速" path="preset_speed">
          <NInputNumber
            v-model:value="modalForm.preset_speed"
            :min="0"
            :precision="0"
            :show-button="false"
            placeholder="请输入预设转速"
          />
        </NFormItem>
        <NFormItem label="描述" path="desc">
          <NInput
            v-model:value="modalForm.desc"
            type="textarea"
            clearable
            placeholder="请输入描述"
          />
        </NFormItem>
      </NForm>
    </CrudModal>
  </CommonPage>
</template>

<script setup>
import { h, onMounted, ref } from 'vue'
import { NButton, NInput, NInputNumber, NFormItem, NPopconfirm, NForm } from 'naive-ui'
import CrudTable from '@/components/table/CrudTable.vue'
import CrudModal from '@/components/table/CrudModal.vue'
import QueryBarItem from '@/components/query-bar/QueryBarItem.vue'
import CommonPage from '@/components/page/CommonPage.vue'
import TheIcon from '@/components/icon/TheIcon.vue'
import api from '@/api/rotor'
import { useCRUD } from '@/composables'

defineOptions({ name: '旋翼类型管理' })

const $table = ref(null)
const queryItems = ref({
  name: '',
})

const {
  modalVisible,
  modalTitle,
  modalLoading,
  handleSave,
  modalForm,
  modalFormRef,
  handleEdit,
  handleDelete,
  handleAdd,
} = useCRUD({
  name: '旋翼类型',
  initForm: {
    name: '',
    preset_speed: null,
    desc: '',
  },
  doCreate: api.createRotorType,
  doDelete: api.deleteRotorType,
  doUpdate: api.updateRotorType,
  refresh: () => $table.value?.handleSearch(),
})

const validateRotorType = {
  name: [
    {
      required: true,
      message: '请输入类型名称',
      trigger: ['blur', 'input'],
    },
  ],
  preset_speed: [
    {
      required: true,
      type: 'number',
      message: '请输入预设转速',
      trigger: ['blur', 'input'],
    },
    {
      validator: (rule, value) => {
        if (value === null || value === undefined) return true
        if (!Number.isInteger(value)) {
          return new Error('预设转速必须为整数')
        }
        if (value < 0) {
          return new Error('预设转速不能小于0')
        }
        return true
      },
      trigger: ['blur', 'input'],
    },
  ],
}

const columns = [
  {
    title: '类型名称',
    key: 'name',
    width: 160,
    align: 'center',
  },
  {
    title: '预设转速',
    key: 'preset_speed',
    width: 160,
    align: 'center',
  },
  {
    title: '描述',
    key: 'desc',
    align: 'center',
  },
  {
    title: '创建时间',
    key: 'created_at',
    width: 180,
    align: 'center',
  },
  {
    title: '操作',
    key: 'actions',
    width: 200,
    align: 'center',
    fixed: 'right',
    render(row) {
      return [
        h(
          NButton,
          {
            type: 'primary',
            size: 'small',
            style: { marginRight: '10px' },
            onClick: () => handleEdit(row),
          },
          { default: () => '编辑' }
        ),
        h(
          NPopconfirm,
          {
            onPositiveClick: () => handleDelete({ rotor_type_id: row.id }, false),
          },
          {
            default: () => '确认删除？',
            trigger: () =>
              h(
                NButton,
                {
                  type: 'error',
                  size: 'small',
                },
                { default: () => '删除' }
              ),
          }
        ),
      ]
    },
  },
]

onMounted(() => {
  $table.value?.handleSearch()
})
</script> 